<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script type="text/javascript" src="../../../static/js/admin.js"></script>-->
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/css/app.css">
    <link rel="stylesheet" href="../../../static/css/survey.css">
    <link rel="stylesheet" href="../../../static/css/index.css">
    <style>
        .layui-input-block{
            margin-left: 150px;
        }
    </style>
</head>
<body>
<div>
</div>
<br>
<form enctype="multipart/form-data" method="post" class="layui-form"  style="width: 80%;margin: auto;">
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">轮播图片</label>
        <div class="layui-input-block">
            <img height="85" id="courseImg" width="85" src="../../../static/images/frame.png"
                 onclick="addInputFile()">

        </div>
    </div>
    <div class="layui-form-item it">
        <label class="layui-form-label" style=" width: 150px">关联课程</label>
        <div class="layui-input-block">
            <input class="layui-btn" id="courseNum" style="background: #fff;color: #000;border: 1px solid #dfdfdf;text-align: left" type="text" placeholder="请输入课程id">
            <input class="layui-btn" type="button" value="选择课程"  onclick="openData()">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">是否推荐</label>
        <div class="layui-input-block">
            <select   id="recommend" class="layui-btn">
                <option  value="1" selected>是</option>
                <option value="0" >否</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">排序</label>
        <div class="layui-input-block">
            <input type="number" id="sort"  name="totalClassHour" required lay-verify="required"
                   placeholder="排序" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">推荐开始时间</label>
        <div class="layui-input-block">
            <input type="text" id="startData" name="totalClassHour" required lay-verify="required"
                   placeholder="推荐开始时间" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">推荐结束时间</label>
        <div class="layui-input-block">
            <input type="text" id="endData" name="totalClassHour" required lay-verify="required"
                   placeholder="推荐结束时间" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style=" width: 150px">描述说明</label>
        <div class="layui-input-block">
            <textarea name="briefIntroduction" id="remakeTxt" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-filter="formDemo" onclick="saveData()">保存</button>
            <input class="layui-btn" type="button" name="Submit" onclick="shutDown();" value="返回">
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>

<script src="../../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../static/js/admin.js"></script>
<script src="../../../static/js/republic.js" charset="utf-8"></script>
<script>
    // 定义提交参数
    var newImage;
    var imageRPUrl = 'https://cjrm-prod.oss-cn-shenzhen.aliyuncs.com/'
    var recommendId
    var jsessionid= localStorage.getItem("jsessionid")


    // 使用时间组件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startData', //指定元素
            theme: '#BDBDBD',
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#endData', //指定元素
            theme: '#BDBDBD',
        });
    });

    function selectFile(file,id,imgId) {
        var formData = new FormData()
        formData.append('imageFile',file.files[0]);
        if(imgId!=undefined){
            let inputUrl =   $('#remarkUrl'+imgId).children('input[name="imgurl"]')[0].value
            formData.append('url',inputUrl);
        }

        if (file.files && file.files[0]) {
            $.ajax({
                type: 'POST',
                url: serverUrl+'/KnowledgeCourseAction/uploadImage;jsessionid='+jsessionid,
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                xhrFields: {
                    withCredentials : true
                },
                processData: false
            }).success((res)=>{
                console.log()
               var coureImg = document.getElementById('courseImg')
                coureImg.src = imageRPUrl+JSON.parse(res).data
                newImage =JSON.parse(res).data
                $('#fileId'+id).remove()
            })

        }
    }



    function addImage(url, id) {
        if ($("#" + id).attr('src')) {
            return false;
        } else {
            $("#" + id).attr("src", url);
            $("#" + id).removeAttr("style");
            return true;
        }
        // }

    }


    //         数组   大纲图片

        // remarkFiles
        //保存数据
        var saveData = function () {
            // 是否推荐
            var recommend = document.getElementById('recommend')
            var sort = document.getElementById('sort')
            var courseNum = document.getElementById('courseNum')
            var startData = document.getElementById('startData')
            var endData = document.getElementById('endData')
            var remakeTxt = document.getElementById('remakeTxt')
            var beginTime = new Date(startData.value).valueOf()+""
            var endTime = new Date(endData.value).valueOf()+""

            var fromData = new FormData()
            if(recommendId){
                fromData.append('id',recommendId)
            }

            fromData.append('imageUrl',newImage)
            fromData.append('courseId',courseNum.dataset.id)
            fromData.append('status',recommend.value)
            fromData.append('remark',remakeTxt.value)
            fromData.append('beginTime',beginTime.substr(0,beginTime.length-3))
            fromData.append('endTime',endTime.substr(0,endTime.length-3))
            fromData.append('sequence',sort.value)

            $.ajax({
                type: 'POST',
                url: serverUrl + '/KnowledgeRecommendAction/addRecommendImage;jsessionid='+jsessionid,
                data: fromData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                xhrFields: {
                    withCredentials: true
                },
            }).success((res)=>{
                if(typeof res=="string"){
                    var data = JSON.parse(res)
                }else {
                    var data =res
                }
                if(data.code==0){
                    layer.open({
                        // title: r.msg
                        content: "保存成功"
                        , btn: [' 确定', '取消'],
                        btn1: function () {
                            window.location.href = "./slideshow.html"
                        },
                        btn2: function () {
                        }
                    });
                }else {
                    layer.open({
                        // title: r.msg
                        content: "保存失败"
                        , btn: [' 确定', '取消'],

                    });
                }


            })




        }




    //返回保存图片
    var shutDown = function () {
            window.location.href = "./slideshow.html"
    }



    var courseId;
    $(function () {
        var queryString = getQueryVariable('id');
        if (!queryString) {
            //新建
        } else {
            //编辑
            // alert(queryString);
            courseId = queryString;
            $.ajax({
                type: "GET",
                url: serverUrl + '/KnowledgeRecommendAction/getRecommendImage/' + queryString +';jsessionid='+jsessionid,
                xhrFields: {
                    withCredentials: true
                },
                success: function (r) {
                    if (r.code == 0) {
                        var courseNum = document.getElementById('courseNum')
                        var recommend = document.getElementById('recommend')
                        var sort = document.getElementById('sort')
                        var startData = document.getElementById('startData')
                        var endData = document.getElementById('endData')
                        var remakeTxt = document.getElementById('remakeTxt')
                        var courseImg = document.getElementById('courseImg')
                            var beginTime= r.data.knowledgeRecommendImage.beginTime *1000
                            var endTime= r.data.knowledgeRecommendImage.endTime  *1000

                        recommendId  = r.data.knowledgeRecommendImage.id


                        courseImg.src =imageRPUrl + r.data.knowledgeRecommendImage.imageUrl
                        newImage = r.data.knowledgeRecommendImage.imageUrl
                        courseNum.setAttribute('data-id',r.data.knowledgeRecommendImage.courseId)
                        courseNum.value = r.data.name
                        recommend.value =r.data.knowledgeRecommendImage.status
                        sort.value =r.data.knowledgeRecommendImage.sequence
                        startData.value =  transformTime(beginTime)
                        endData.value =  transformTime(endTime)
                        remakeTxt.value = r.data.knowledgeRecommendImage.remark

                    } else {
                        layer.msg(r.msg);
                    }
                },
            });
        }
        // alert(queryString);
        // 根据课程id   获取课程详情  url = /api/KnowledgeCourse/getCourList/{knowledgeCourseId}

    });

    //根据数据来生成图片
    let imgId = 0
    var imgRPurl= 'http://r.chaojirenmai.vip/'
    var setImg = function (url) {
        var imgBox = $('<div onclick="addInputFile('+imgId+')" id="' + 'remarkUrl' + imgId + '" style="width: 85px;height: 85px;display: inline-block;margin-right: 5px;position: relative"><img style="display:block;width: 100%;height: 100%" src="'+imgRPurl + url + '" alt=""> <span style="position: absolute;top: 0;right: 0;"><img src="../../../static/images/shut.png" alt="" onclick="removeImg(' + 'remarkUrl' + imgId + ')" style="width: 20px;cursor: pointer;"></span><input name="imgurl" type="text" style="display: none" value="'+url+'"></div>')
        imgId++
        $('#remarkUrlT').append(imgBox)
        var remarkUrlChilren = $('#remarkUrlT').children('div')
        if (remarkUrlChilren.length > 8) {
            $('#remarkUrl').css('display', 'none')
        }

    }
    var removeImg = function (id) {
        event.stopPropagation()
        id.remove()
        var remarkUrlChilren = $('#remarkUrlT').children('div')
        if (remarkUrlChilren.length < 9) {
            $('#remarkUrl').css('display', 'inline-block')
        }
        // $('#'+id).remove()
    }
    //用弹层 打开音频页面
    var openData = function () {
        window.WeAdminShow('课程列表','./children/courseList.html')
    }
    var sureCourse = function (data) {
        var courseNum = document.getElementById('courseNum')
        courseNum.value =data.name
        courseNum.setAttribute('data-id',data.id)
        // alert(data)
    }
    //动态生成 input flie 上传
    var fileId =0
    var addInputFile = function (imgId) {
        var inputFile= $('<input type="file"  accept="image/*" id="'+'fileId'+fileId+'" onchange="selectFile(this,'+fileId+','+imgId+')" style="display: none"> ')
        $('#remarkUrlT').append(inputFile)
        inputFile.click()
        fileId++
    }

</script>
</html>